<template>
  <view class="wrapper row">
    <view class="top">
      <view class="bg"></view>
      <view class="detail pd_t_30 pd_l_30 pd_b_30">
        <view class="title color-active font-36 font-b pd_b_20">{{details.thirdSpeName}}</view>
        <view class="item row font-28">
          <view class="label color-333">专业代码：</view>
          <view class="color-666">{{details.thirdSpeCode}}</view>
        </view>
        <view class="item row font-28">
          <view class="label color-333">专业门类：</view>
          <view class="color-666">{{details.firstSpeName || ''}}</view>
        </view>
        <view class="item row font-28">
          <view class="label color-333">专业类别：</view>
          <view class="color-666">{{details.secSpeName || ''}}</view>
        </view>
        <view class="item row font-28">
          <view class="label color-333">专业层次：</view>
          <view class="color-666">{{details.specialtyType || ''}}</view>
        </view>
      </view>
    </view>
    <u-tabs-swiper active-color="#2A6AAA" ref="uTabs"
                   :font-size="28"
                   :list="list" :current="current" @change="tabsChange" :is-scroll="false"
                   swiperWidth="750"></u-tabs-swiper>
    <view class="empety"></view>
    <swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" class="swipper-wrp">
      <swiper-item class="swiper-item">
        <scroll-view scroll-y style="height: 100%">
          <view class="scroll_inner pd_t_20 pd_b_20">
            <view class="title font-28 color-666 yh_bd_bottom pd_b_20 row">
              <view class="border"></view>
              <view>专业方向</view>
            </view>
            <view class="u-font-sm pd_t_30 pd_b_30">
              <view class="item pd_b_20 row">
                <view class="label">就业率：</view>
                <view class="content">{{details.specialtyEmployRate || ''}}</view>
              </view>
              <view class="item pd_b_20 row">
                <view class="label">培养方向：</view>
                <view class="content">{{details.culturePath || ''}}</view>
              </view>
              <view class="item pd_b_20 row">
                <view class="label">报考硕士专业：</view>
                <view class="content">{{details.masterSpecialty || ''}}</view>
              </view>
            </view>
            <view class="title font-28 color-666 yh_bd_bottom pd_b_20 row">
              <view class="border"></view>
              <view>开设课程</view>
            </view>
            <view class="table" v-if="classNames.length > 1">
              <view class="th bg-f2f2f2 row cont-center flex-around">
                <view class="td color-active font-24 pd_t_20 pd_b_20 flex-1 u-text-center">序号</view>
                <view class="td color-active font-24 pd_t_20 pd_b_20 flex-1 u-text-center">课程名称</view>
              </view>
              <block v-for="(item, index) in classNames" :key="index">
                <view class="th row cont-center flex-around" :class="{'bg-f2f2f2': index % 2 != 0}">
                  <view class="td flex-1 u-font-sm pd_t_20 pd_b_20 u-text-center">{{index + 1}}</view>
                  <view class="td flex-1 u-font-sm pd_t_20 pd_b_20 u-text-center">{{item}}</view>
                </view>
              </block>
              <view class="color-999 u-font-xs u-padding-20 u-text-center">数据仅供参考，最终以高校公布为准！</view>
            </view>
            <view v-if="classNames.length == 1" class="u-font-sm u-text-center u-p-t-30">
              <block v-if="classNames[0].includes('暂')">
                {{classNames[0]}}
              </block>
              <block v-else>
                <view class="th bg-f2f2f2 row cont-center flex-around">
                  <view class="td color-active font-24 pd_t_20 pd_b_20 flex-1 u-text-center">序号</view>
                  <view class="td color-active font-24 pd_t_20 pd_b_20 flex-1 u-text-center">课程名称</view>
                </view>
                <block v-for="(item, index) in classNames" :key="index">
                  <view class="th row cont-center flex-around" :class="{'bg-f2f2f2': index % 2 != 0}">
                    <view class="td flex-1 u-font-sm pd_t_20 pd_b_20 u-text-center">{{index + 1}}</view>
                    <view class="td flex-1 u-font-sm pd_t_20 pd_b_20 u-text-center">{{item}}</view>
                  </view>
                </block>
                <view class="color-999 u-font-xs u-padding-20 u-text-center">数据仅供参考，最终以高校公布为准！</view>
              </block>
            </view>
          </view>
        </scroll-view>
      </swiper-item>
      <swiper-item class="swiper-item">
        <scroll-view scroll-y style="height: 100%">
          <text class="scroll_inner pd_t_20 pd_b_20 color-333 u-font-sm" style="display: block" :selectable="true">
            {{details.specialtyDesc}}
          </text>
        </scroll-view>
      </swiper-item>
      <swiper-item class="swiper-item">
        <scroll-view scroll-y style="height: 100%" v-if="loginFlag">
          <view class="scroll_inner pd_t_20 pd_b_20">
            <view class="title font-28 color-666 yh_bd_bottom pd_b_20 row">
              <view class="border"></view>
              <view class="flex-1">开设院校</view>
              <!--<navigator url="/pages/explore/zhuanye_school" class="font-24 color-999">更多 ></navigator>-->
            </view>
            <view class="table">
              <view class="th bg-f2f2f2 row cont-center flex-around">
                <view class="td color-active u-font-sm pd_t_20 pd_b_20 flex-1 u-text-center">专业排名</view>
                <view class="td color-active u-font-sm pd_t_20 pd_b_20 flex-1 u-text-center">院校名称</view>
              </view>
              <block v-if="details.specialtySchoolRelationList.length">
                <view class="th row cont-center flex-around" :key="index"
                      v-for="(item, index) in details.specialtySchoolRelationList" :class="{'bg-f2f2f2': index % 2 != 0}">
                  <view class="td flex-1 u-font-sm pd_t_20 pd_b_20 u-text-center">{{item.cultureRank || '-'}}</view>
                  <view v-if="!item.schoolId"
                             class="td flex-1 u-font-sm pd_t_20 pd_b_20 u-text-center">{{item.schoolName}}</view>
                  <navigator v-if="item.schoolId" :url="`/pages/explore/school_info?id=${item.schoolId}`"
                             class="td flex-1 u-font-sm pd_t_20 pd_b_20 u-text-center color-active">{{item.schoolName}}</navigator>
                </view>
              </block>
              <view v-if="!details.specialtySchoolRelationList.length" class="u-padding-20 color-999 u-font-sm u-text-center">暂无信息</view>
            </view>
            <view v-if="details.specialtySchoolRelationList.length" class="color-999 text-cent font-20 u-p-b-30 u-p-t-30">数据仅供参考，最终以高校与考试院公布为准！</view>
          </view>
        </scroll-view>
        <go_login v-if="!loginFlag"></go_login>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
  import {request} from "../../util/api";
  import mixins from "./mixins";
  import go_login from "@/components/go_login";
  import {getCurrentFullPath} from "../../util/util";

  export default {
    mixins: [mixins],
    components: {go_login},
    onLoad (option) {
      this.getDetail(option.code)
    },
    data() {
      return {
        list: [{
          name: '基本信息'
        }, {
          name: '专业介绍'
        }, {
          name: '开设院校'
        }],
        tabs: [],
        current: 0, // tabs组件的current值，表示当前活动的tab选项
        swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
        details: {},
        classNames: []
      }
    },
    methods: {
      getDetail(code) {
        request({
          url: '/system/wx/CompassSpecialty/getInfoByThirdSpeCode/' + code,
          token: true
        }).then(res => {
          uni.setNavigationBarTitle({
            title: res.data.thirdSpeName || '专业详情'
          });
          if (res.data.specialtySchoolRelationList.length) {
            res.data.specialtySchoolRelationList = res.data.specialtySchoolRelationList.sort(this.compare('cultureRank'))
          }
          this.details = res.data
          this.classNames = res.data.classNames.replace(/^\s+|\s+$/g, '').split(" ")
        })
      },
      // tabs通知swiper切换
      tabsChange(index) {
        this.swiperCurrent = index;
      },
      // swiper-item左右移动，通知tabs的滑块跟随移动
      transition(e) {
        let dx = e.detail.dx;
        this.$refs.uTabs.setDx(dx);
      },
      // 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
      // swiper滑动结束，分别设置tabs和swiper的状态
      animationfinish(e) {
        let current = e.detail.current;
        this.$refs.uTabs.setFinishCurrent(current);
        this.swiperCurrent = current;
        this.current = current;
      },

      compare(property){
        return function(a, b) {
          var value1 = a[property];
          var value2 = b[property];
          if (value2 == '-') {
            value2 = Infinity
          }
          return value1 - value2;
        }
      }
    },
    onShareAppMessage(res) {
      return {
        path: getCurrentFullPath()
      }
    }
  }
</script>

<style scoped lang="scss">
  .wrapper {
    flex-direction: column;
    height: 100%;
    .top {
      position: relative;
      .bg {
        background-image: linear-gradient(rgb(39,148,217), rgb(156,210,244));
        height: 260upx;
        border-radius: 0 0 100upx 100upx;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        width: 100%;
      }
      .detail {
        width: 90%;
        margin: 0 auto;
        box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.4);
        border-radius: 16upx;
        z-index: 10;
        background: #fff;
        margin-top: 20upx;
        .title, .item {
          z-index: 1;
        }
      }
    }
    .empety {
      height: 20upx;
      background: #f7f7f7;
    }
    .swipper-wrp {
      flex: 1;
      .scroll_inner {
        width: 92%;
        margin: 0 auto;
        .title {
          .border {
            width: 4px;
            background: #1f476d;
            margin-right: 20upx;
          }
        }
        .item {
          .label {
            width: 185upx;
            text-align: right;
          }
          .content {
            flex: 1;
          }
        }
      }
    }
  }
</style>
